import { populationSize } from '../../constant'

let bgColor = '#001037'
let color = ['#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7']

export const option = {
    // backgroundColor: bgColor,
    color: color,
    tooltip: {
        formatter: (params: any) => {
            return ' ' + params.name + ' 占比:' + params.percent + '%'
        },
        trigger: 'item'
    },
    grid: {
        left: '10%',
        top: '10%',
        right: '10%',
        bottom: '10%',
        containLabel: true
    },
    title: {
        text: '贫困户人口组成',
        x: 'center',
        top: '5%',
        textStyle: {
            color: '#ffffff',
            align: 'center',
            fontSize: 20
        }
    },
    series: [
        {
            type: 'pie',
            roseType: 'radius',
            radius: ['20%', '60%'],
            center: ['50%', '50%'],
            data: populationSize,
            hoverAnimation: false,
            itemStyle: {
                borderColor: bgColor,
                borderWidth: 2
            },
            labelLine: {
                length: 10,
                length2: 100,
                lineStyle: {
                    // color: '#e6e6e6'
                }
            },
            label: {
                formatter: (params: any) => {
                    return '{icon|●}{name|' + params.name + '}\n{percent|' + params.percent + '%}'
                },
                padding: [0, -100, 0, -100],
                rich: {
                    icon: {
                        fontSize: 16,
                        color: 'inherit'
                    },
                    name: {
                        fontSize: 18,
                        padding: [0, 0, 0, 10],
                        color: '#fefefe'
                    },
                    percent: {
                        fontSize: 18,
                        padding: [10, 0, 0, 10],
                        color: '#fefefe'
                    }
                }
            }
        }
    ]
}
